<template>
    <div class="content declare-list-content">
        <div class="content-top">
            <Button class="icon-btn" type="primary" @click="addData">
                <i class="iconfont icon-shanchu"></i> 新建核注清单
            </Button>
            <Button class="icon-btn" @click="deleteData" v-if="canDel">
                批量删除
            </Button>
            <Button class="icon-btn" type="default" @click="sendToSingleWindow">
                <i class="iconfont icon-xiugaishangpin"></i> 批量申报
            </Button>
            <Button class="icon-btn" type="primary" @click="importModal = true">
                <i class="iconfont icon-shanchu"></i> 导入
            </Button>
            <SearchExpand class="search-collapse-small">
                <Row>
                    <iCol :span="2">
                        <div class="search-label">企业内部编号</div>
                    </iCol>
                    <iCol :span="4">
                        <Input
                            clearable
                            v-model="searchData.etpsInnerInvtNo"
                            type="text"
                            placeholder="请输入企业内部编号"
                        ></Input>
                    </iCol>
                    <iCol :span="2">
                        <div class="search-label">状态</div>
                    </iCol>
                    <iCol :span="4">
                        <Select v-model="searchData.listStat">
                            <Option value="0" label="全部"></Option>
                            <Option
                                v-for="(value, key) in invtStatus"
                                :value="key"
                                :key="key"
                            >{{ value }}</Option>
                        </Select>
                    </iCol>
                    <iCol :span="2">
                        <div class="search-label">进出口别</div>
                    </iCol>
                    <iCol :span="3">
                        <Select v-model="searchData.impexpMarkcd">
                            <Option value="0" label="全部"></Option>
                            <Option value="I" label="进口"></Option>
                            <Option value="E" label="出口"></Option>
                        </Select>
                    </iCol>
                    <iCol :span="2">
                        <div class="search-label">申报日期</div>
                    </iCol>
                    <iCol :span="5">
                        <DatePicker
                            type="daterange"
                            placeholder="请选择创建时间"
                            @on-change="handleSearchDateChange"
                            placement="bottom"
                        />
                    </iCol>
                    <iCol :span="2">
                        <div class="search-label">创建类型</div>
                    </iCol>
                    <iCol :span="4">
                        <Select v-model="searchData.saveType">
                            <Option value="0" label="全部"></Option>
                            <Option
                                v-for="(value, key) in createStatus"
                                :value="key"
                                :key="key"
                            >{{ value }}</Option>
                        </Select>
                    </iCol>
                    <iCol :span="2">
                        <div class="search-label">客户名称</div>
                    </iCol>
                    <iCol :span="4">
                        <Input
                            clearable
                            v-model="searchData.custName"
                            type="text"
                            placeholder="请输入客户名称"
                        ></Input>
                    </iCol>
                    <iCol :span="2">
                        <div class="search-label">货物名称</div>
                    </iCol>
                    <iCol :span="3">
                        <Input
                            clearable
                            v-model="searchData.goodsName"
                            type="text"
                            placeholder="请输入货物名称"
                        ></Input>
                    </iCol>
                    <iCol :span="2">
                        <div class="search-label">仓库核注清单号</div>
                    </iCol>
                    <iCol :span="5">
                        <Button class="f-fr" size="small" type="primary" @click="search">查询</Button>
                        <div style="margin-right: 55px;">
                            <Input
                                clearable
                                v-model="searchData.bondInvtNo"
                                type="text"
                                placeholder="请输入清单号"
                            ></Input>
                        </div>
                    </iCol>
                </Row>
            </SearchExpand>
            <div class="search-tools">
                <Icon
                    :class="{
                        'refresh-btn': true,
                        loading: rfLoading
                    }"
                    title="刷新"
                    type="md-refresh"
                    :size="24"
                    color="#a7a7a7"
                    @click="refreshStockList"
                />
            </div>
        </div>
        <Table
            highlight-row
            border
            class="ivu-table-list"
            :columns="tableColumns"
            :data="tableData"
            :loading="loading"
            ref="checkTable"
            @on-selection-change="selectInvtChange"
            @on-row-dblclick="dblclickHandle"
        >
            <template slot="listStat" slot-scope="props">
                <div>
                    {{props.listStat ? (invtStatus[props.listStat] || '') : ''}}
                </div>
            </template>
            <template slot="action" slot-scope="props">
                <div class="table-action" @dblclick.stop>
                    <Dropdown trigger="click" transfer>
                        <i class="table-icon t-setting-icon" title="更多操作"></i>
                        <DropdownMenu slot="list">
                            <DropdownItem @click.native="openReceipt(props.invtId)">
                                查看回执
                            </DropdownItem>
                            <DropdownItem @click.native="printInvt(props.invtId)">
                                打印
                            </DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                </div>
            </template>
        </Table>
        <Pagination
            :pageSize.sync="searchData.pageSize"
            :current.sync="searchData.pageNum"
            :total="searchData.total"
            @change="queryTableData"
        />
        <ImportModal
            v-model="importModal"
            :refreshMethod="queryTableData"
            :templateList="templateList"
            :defautl-action="importXlsInvtUrl"
            :import-params="importParams"
        ></ImportModal>
        <ReceiptModal
            v-model="receiptModal.visible"
            :invtId="receiptModal.id"
        ></ReceiptModal>
        <!-- 申报结果 -->
        <Modal width="450px" v-model="resultModal.visible" footer-hide :closable="false">
            <div>
                <div class="result-modal-header">
                    <Icon v-if="resultModal.failNum > 0" type="ios-alert" color="#f90" :size="28"></Icon>
                    <Icon v-else type="ios-checkmark-circle" color="#19be6b" :size="28"></Icon>
                    <span class="result-modal-header-title">{{resultModal.title}}</span>
                </div>
                <div class="result-modal-content" v-if="resultModal.failNum > 0">
                    <p>
                        <span class="success">{{resultModal.successNum}}</span> 条清单申报成功
                    </p>
                    <p>
                        <span class="error">{{resultModal.failNum}}</span> 条清单申报失败
                    </p>
                    <p>
                        失败清单编号：{{resultModal.failInenerNo}}
                    </p>
                </div>
                <div class="result-modal-content" v-else>
                    批量申报成功！
                </div>
                <div class="result-modal-content-footer">
                    <Button type="primary" @click="closeResultModal">关闭</Button>
                </div>
            </div>
        </Modal>
        <PrintModal
            title="打印核注清单"
            v-model="printModal.visible"
            :options="printModal.options"
            :queryFileFn="queryInvtFile"
        ></PrintModal>
    </div>
</template>
<script>
import { queryCheckRegList, deleteCheckReg, sendInvtToSingleWindow, importXlsInvtUrl } from '@/api/invt'
import { defInvtTemp } from '@/api/downloadTemp'
import ImportModal from './components/import-modal'
import ReceiptModal from './components/receipt-modal'
import SearchExpand from '_c/search-expand'

import printMixins from './js/print-mixins'

export default {
    name: 'CheckReg',
    inject: ['nextPageReload'],
    mixins: [
        printMixins
    ],
    components: {
        SearchExpand,
        ImportModal,
        ReceiptModal
    },
    data () {
        const tableTipsRender = (h, { column, row }) => {
            const key = column.key
            const value = key && row[key] || ''
            return h('span', {
                attrs: {
                    title: value
                }
            }, value)
        }
        return {
            canEdit: true,
            canDel: true,
            tableColumns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '企业内部编号',
                    key: 'etpsInnerInvtNo',
                    render: tableTipsRender,
                    align: 'center'
                },
                {
                    title: '进出口别',
                    width: 70,
                    align: 'center',
                    render: (h, { row }) => {
                        const { impexpMarkcd } = row
                        const name = impexpMarkcd
                            ? impexpMarkcd == 'I' ? '进口' : '出口'
                            : ''
                        return h('div', name)
                    }
                },
                {
                    title: '清单类别',
                    key: 'invtTypeName',
                    align: 'center'
                },
                {
                    title: '状态',
                    key: 'listStat',
                    align: 'center',
                    render: (h, params) => {
                        return h(
                            'div',
                            this.$refs.checkTable.$scopedSlots.listStat(
                                params.row
                            )
                        )
                    }
                },
                {
                    title: '预录入统一编号',
                    key: 'seqNo',
                    render: tableTipsRender,
                    align: 'center'
                },
                {
                    title: '监管方式',
                    key: 'supvModecdName',
                    align: 'center'
                },
                {
                    title: '手(账)册编号',
                    key: 'putrecNo',
                    render: tableTipsRender,
                    align: 'center'
                },
                {
                    title: '创建时间',
                    key: 'createTime',
                    align: 'center',
                    width: 130
                },
                {
                    title: '申报日期',
                    key: 'invtDclTime',
                    align: 'center',
                    width: 130
                },
                {
                    title: '操作',
                    key: 'action',
                    align: 'center',
                    fixed: 'right',
                    width: 60,
                    render: (h, params) => {
                        return h(
                            'div',
                            this.$refs.checkTable.$scopedSlots.action(
                                params.row
                            )
                        )
                    }
                }
            ],
            tableData: [],
            searchData: {
                etpsInnerInvtNo: '', // 系统编号
                listStat: '0', // 状态
                saveType: 'U',
                impexpMarkcd: '0', // 进出口别
                invtDclTimeStart: '', // 日期
                invtDclTimeEnd: '', // 日期
                custName: '', // 客户名称
                bondInvtNo: '', // 仓库核注清单号
                goodsName: '', // 货物名称
                pageNum: 1,
                pageSize: 10,
                total: 1000
            },
            loading: false,
            invtIds: '',
            importXlsInvtUrl, // 默认导入地址
            importModal: false,
            templateList: [{
                value: -1,
                label: '核注清单导入模板',
                url: defInvtTemp
            }],
            resultModal: {
                visible: false,
                title: '申报成功',
                failInenerNo: '',
                failNum: 0,
                successNum: 0
            },
            receiptModal: {
                visible: false,
                id: ''
            },
            invtStatus: {
                S0: '暂存成功',
                S1: '暂存失败',
                D0: '申报成功',
                D1: '申报失败',
                DY: '系统数据处理通过',
                DB: '电子审异常终止退单',
                B: '海关退单',
                S: '成功发往海关',
                R: '成功入海关库',
                Y: '海关预审通过',
                ZH: '终审已核扣',
                ZR: '金关序号反填'
            },
            createStatus: {
                U: '用户创建',
                W: '系统关联创建'
            },
            rfLoading: false // 刷新标识
        }
    },
    computed: {
        importParams () {
            return {
                practicalTrainingId: this.$route.params.trainingId
            }
        }
    },
    mounted () {
        this.queryTableData()
    },
    methods: {
        // 处理 搜索栏 创建时间 改变
        handleSearchDateChange (v) {
            this.searchData.invtDclTimeStart = v[0] || ''
            this.searchData.invtDclTimeEnd = v[1] || ''
        },
        // 搜索
        search () {
            this.searchData.pageNum = 1
            this.queryTableData()
        },
        // 刷新列表
        refreshStockList () {
            if (this.rfLoading) return
            this.rfLoading = true
            this.queryTableData()
        },
        // 获取表格数据
        queryTableData () {
            this.loading = true
            const searchData = { ...this.searchData }
            if (searchData.listStat === '0') searchData.listStat = ''
            if (searchData.saveType === '0') searchData.saveType = ''
            if (searchData.impexpMarkcd === '0') searchData.impexpMarkcd = ''
            searchData.practicalTrainingId = this.$route.params.trainingId
            queryCheckRegList(searchData).then(res => {
                if (res.data.code === '0000') {
                    // 清除已选择的数据
                    this.invtIds = ''
                    this.tableData = res.data.data.list
                    this.searchData.total = res.data.data.total
                } else {
                    this.$Message.warning(res.data.msg)
                }
                this.loading = false
                this.rfLoading = false
            }).catch(err => {
                this.loading = false
                this.rfLoading = false
            })
        },
        // 删除
        deleteData () {
            if (this.invtIds) {
                const len = this.invtIds.split(',').length
                this.$Modal.confirm({
                    title: '删除核注清单',
                    content: `已选中 ${len} 条数据，删除后不可恢复，是否确认删除？`,
                    loading: true,
                    onOk: () => {
                        deleteCheckReg(this.invtIds).then(res => {
                            if (res.data.code === '0000') {
                                this.$Message.success('删除成功')
                                this.queryTableData()
                            } else {
                                this.$Message.success(res.data.msg)
                            }
                            this.$Modal.remove()
                        }).catch(err => {
                            this.$Modal.remove()
                        })
                    }
                })
            } else {
                this.$Message.warning('请选择需要删除的数据')
            }
        },
        editData (id) {
            this.nextPageReload()
            this.$router.push({
                name: 'invtEdit',
                params: {
                    id: id
                }
            })
        },
        addData () {
            this.nextPageReload()
            this.$router.push({
                name: 'invtAdd'
            })
        },
        selectInvtChange (list) {
            this.invtIds = list.map(item => item.invtId).join(',')
        },
        sendToSingleWindow () {
            console.log(this.invtIds)
            if (this.invtIds) {
                this.$Modal.confirm({
                    title: '批量申报',
                    content: '是否批量申报已选择的清单？',
                    loading: true,
                    onOk: _ => {
                        sendInvtToSingleWindow(this.invtIds).then(res => {
                            this.$Modal.remove()
                            if (!res) return
                            if (res.data.code === '0000') {
                                this.resultModal.visible = true
                                this.resultModal.title = res.data.data.failNum > 0 ? '申报结果' : '申报成功'
                                this.resultModal.failInenerNo = res.data.data.failInenerNo
                                this.resultModal.failNum = res.data.data.failNum
                                this.resultModal.successNum = res.data.data.successNum
                            } else {
                                this.$Message.warning(res.data.msg || '申报失败')
                            }
                        }).catch(err => {
                            this.$Modal.remove()
                            console.log(err)
                        })
                    }
                })
            } else {
                this.$Message.warning('至少选择一条数据')
            }
        },
        // 关闭批量申报弹窗
        closeResultModal () {
            this.resultModal.visible = false
            this.queryTableData()
        },
        // 查看回执
        openReceipt (id) {
            this.receiptModal.id = id
            this.receiptModal.visible = true
        },

        // 双击行
        dblclickHandle (data) {
            if (this.canEdit) {
                this.editData(data.invtId)
            }
        }
    }
}
</script>

<style lang="less" scoped>
.search-label {
    white-space: nowrap;
}
.result-modal-header {
    padding: 6px 0;
    &-title {
        display: inline-block;
        vertical-align: middle;
        margin-left: 12px;
        font-size: 16px;
        color: #17233d;
        font-weight: 700;
    }
}
.result-modal-content {
    padding: 5px 0 5px 42px;
    font-size: 14px;
    white-space:normal;
    word-break: break-word;
    p + p {
        margin-top: 6px;
    }
    .success {
        color: #19be6b;
    }
    .error {
        color: #ed4014;
    }
}
.result-modal-content-footer {
    text-align: right;
    padding-top: 15px;
}
.content-top {
    position: relative;
    .search-tools {
        position: absolute;
        top: 5px;
        right: 0;
    }
}
.refresh-btn {
    cursor: pointer;
    margin-right: 15px;
    transition: all 1s ease 2s;
    &.loading {
       animation: circlerotate 1s 0s ease-in-out infinite;
    }
}

@keyframes circlerotate{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);}
}
</style>
